
//- This Source Code Form is subject to the terms of the Mozilla Public
//- License, v. 2.0. If a copy of the MPL was not distributed with this
//- file, You can obtain one at http://mozilla.org/MPL/2.0/.
//-
//- Copyright (c) 2021-present Kaleidos Ventures SL

div.taskboard-table(
    tg-taskboard-squish-column,
    tg-taskboard-sortable,
    ng-class="{'zoom-0': ctrl.zoomLevel == 0, 'zoom-1': ctrl.zoomLevel == 1, 'zoom-2': ctrl.zoomLevel == 2, 'zoom-3': ctrl.zoomLevel == 3}"
)
    div.taskboard-table-header
        div.taskboard-table-inner
            h2.task-colum-name(translate="TASKBOARD.TABLE.COLUMN")
            h2.task-colum-name(
                ng-repeat="s in ::taskStatusList track by s.id"
                ng-style="{'border-bottom-color':s.color}"
                ng-class="{'column-fold':statusesFolded[s.id]}"
                class="squish-status-{{s.id}}"
                tg-bo-title="s.name"
            )
                span(tg-bo-bind="s.name")

                button.btn-board(
                    ng-click='foldStatus(s)'
                    ng-class='{hidden:statusesFolded[s.id]}'
                )
                    tg-svg.hfold.fold-action(
                        svg-icon="icon-fold-column",
                        title="{{'TASKBOARD.TABLE.TITLE_ACTION_FOLD' | translate}}"
                    )

                button.btn-board(
                    ng-click='foldStatus(s)'
                    ng-class='{hidden:!statusesFolded[s.id]}'
                )
                    tg-svg.hunfold.fold-action(
                        svg-icon="icon-unfold-column",
                        title="{{'TASKBOARD.TABLE.TITLE_ACTION_UNFOLD' | translate}}"
                    )


    .taskbord-utility-wrapper(data-js="taskboard-table-hscroll")
        .taskboard-table-body(tg-taskboard-table-height-fixer)

            div.taskboard-table-inner
                div.taskboard-row(
                    ng-if="userstories.length === 0"
                    ng-init="us = null",
                    ng-class="{'row-fold':usFolded[null], empty: !tasksByUs.get(null).size}"
                )
                    div.taskboard-row-title-box.taskboard-column
                        .card-placeholder(
                            ng-class='{"not-found": ctrl.notFoundTasks}'
                            ng-include="'common/components/taskboard-placeholder.html'"
                        )

                    div.taskboard-cards-box.taskboard-column(
                        ng-repeat="st in ::taskStatusList track by st.id",
                        class="squish-status-{{st.id}}",
                        ng-class="{'column-fold':statusesFolded[st.id]}",
                        tg-bind-scope
                    )

                div.taskboard-row(
                    ng-repeat="us in userstories track by us.id",
                    ng-class="{blocked: us.is_blocked, 'row-fold':usFolded[us.id], empty: !tasksByUs.get(us.id).size}"
                )
                    div.taskboard-row-title-box.taskboard-column(tg-bo-title="us.blocked_note")
                        .folding-actions(ng-click='foldUs(us.id)')
                            tg-svg.vfold.fold-action(
                                svg-icon="icon-arrow-up",
                                title="{{'TASKBOARD.TABLE.TITLE_ACTION_FOLD_ROW' | translate}}"
                                ng-class='{hidden:usFolded[us.id]}'
                            )

                            tg-svg.vunfold.fold-action(
                                svg-icon="icon-arrow-down",
                                title="{{'TASKBOARD.TABLE.TITLE_ACTION_UNFOLD_ROW' | translate}}"
                                ng-class='{hidden:!usFolded[us.id]}'
                            )

                        .taskboard-us
                            h3.us-title
                                a(href="",
                                tg-nav="project-userstories-detail:project=project.slug,ref=us.ref",
                                tg-nav-get-params="{\"milestone\": {{us.milestone}}}",
                                tg-bo-title="'#' + us.ref + ' ' + us.subject")
                                    span.us-ref(tg-bo-ref="us.ref")
                                    span.us-subject(ng-bind-html="us.subject | emojify")
                            tg-belong-to-epics(
                                format="pill"
                                ng-if="us.epics"
                                epics="us.epics"
                            )
                            div.us-data
                                p.points-value(data-id="{{us.id}}")
                                    span.card-estimation(
                                        ng-if="us.total_points"
                                        title="{{ 'COMMON.CARD.ESTIMATION' | translate }}"
                                        translate="COMMON.CARD.PTS"
                                        translate-values="{ 'pts': us.total_points}"
                                    )

                                    span.card-estimation.not-estimated(
                                        ng-if="!us.total_points",
                                        translate="US.NOT_ESTIMATED"
                                    )

                                tg-due-date.due-date(
                                    due-date="us.due_date"
                                    is-closed="us.is_closed"
                                    ng-if="us.due_date"
                                    obj-type="us"
                                )

                                span.card-lock(ng-if="us.is_blocked")
                                    tg-svg(svg-icon="icon-lock")

                                p.status-value(ng-if="usStatusById[us.status]")
                                    span(
                                    ng-style="{'color': usStatusById[us.status]['color']}"
                                    ng-bind="usStatusById[us.status]['name']")

                            .add-new-task
                                include ../components/addnewtask

                    div.taskboard-cards-box.taskboard-column(
                        ng-repeat="st in ::taskStatusList track by st.id",
                        class="squish-status-{{st.id}}",
                        ng-class="{'column-fold':statusesFolded[st.id], 'row-max-two': usTasks.getIn([us.id.toString(), st.id.toString()]).size === 2, 'row-max-three': usTasks.getIn([us.id.toString(), st.id.toString()]).size >= 3}",
                        tg-bind-scope
                    )
                        tg-card.card.ng-animate-disabled(
                            data-id="{{ taskId }}"
                            tg-repeat="taskId in usTasks.getIn([us.id.toString(), st.id.toString()])"
                            ng-class="{'kanban-task-maximized': ctrl.isMaximized(s.id), 'kanban-task-minimized': ctrl.isMinimized(s.id)}"
                            tg-class-permission="{'readonly': '!modify_task'}"
                            on-toggle-fold="ctrl.toggleFold(id, 'tasks')"
                            on-click-edit="ctrl.editTask(id)"
                            on-click-delete="ctrl.deleteTask(id)"
                            on-click-assigned-to="ctrl.changeTaskAssignedTo(id)"
                            project="project"
                            item="taskMap.get(taskId)"
                            zoom="ctrl.zoom"
                            zoom-level="ctrl.zoomLevel"
                            in-view-port="true"
                            type="task"
                            folded="statusesFolded[st.id] || usFolded[us.id]"
                        )
                div.taskboard-row(
                    ng-init="us = null",
                    ng-class="{'row-fold':usFolded[null], empty: !tasksByUs.get(null).size}"
                )
                    div.taskboard-row-title-box.taskboard-column
                        .folding-actions
                            a.vfold(
                                href=""
                                title="{{'TASKBOARD.TABLE.TITLE_ACTION_FOLD_ROW' | translate}}"
                                ng-click='foldUs(null)'
                                ng-class="{hidden:usFolded[null]}"
                            )
                                tg-svg.fold-action(svg-icon="icon-arrow-up")
                            a.vunfold(
                                href=""
                                title="{{'TASKBOARD.TABLE.TITLE_ACTION_UNFOLD_ROW' | translate}}"
                                ng-click='foldUs(null)'
                                ng-class="{hidden:!usFolded[null]}"
                            )
                                tg-svg.fold-action(svg-icon="icon-arrow-down")

                        .taskboard-us
                            h3.us-title
                                span(translate="TASKBOARD.TABLE.ROW_STORYLESS_TASKS_TITLE")

                            .add-new-task
                                include ../components/addnewtask.jade

                    div.taskboard-cards-box.taskboard-column(
                        ng-repeat="st in ::taskStatusList track by st.id",
                        class="squish-status-{{st.id}}",
                        ng-class="{'column-fold':statusesFolded[st.id]}",
                        tg-bind-scope
                    )
                        tg-card.card.ng-animate-disabled(
                            data-id="{{ taskId }}"
                            tg-repeat="taskId in usTasks.getIn(['null', st.id.toString()])"
                            ng-class="{'kanban-task-maximized': ctrl.isMaximized(s.id), 'kanban-task-minimized': ctrl.isMinimized(s.id)}"
                            tg-class-permission="{'readonly': '!modify_task'}"
                            on-toggle-fold="ctrl.toggleFold(id, 'tasks')"
                            on-click-edit="ctrl.editTask(id)"
                            on-click-delete="ctrl.deleteTask(id)"
                            on-click-assigned-to="ctrl.changeTaskAssignedTo(id)"
                            project="project"
                            item="taskMap.get(taskId)"
                            zoom="ctrl.zoom"
                            zoom-level="ctrl.zoomLevel"
                            in-view-port="true"
                            type="task"
                            folded="statusesFolded[st.id] || usFolded[null]"
                        )
        .issues-wrapper(
            ng-class="{'zoom-0': ctrl.zoomLevel == 0, 'zoom-1': ctrl.zoomLevel == 1, 'zoom-2': ctrl.zoomLevel == 2, 'zoom-3': ctrl.zoomLevel == 3}"
        )
            tg-issues-table(
                tg-issues-ordering
                ng-if="ctrl.initIssues"
                sprint-issues="true"
                issues="issues"
                show-tags="showTags"
                on-load-issues="ctrl.loadIssues()"
                on-add-new-issue="ctrl.addNewIssue('standard', null)"
                on-add-issues-in-bulk="ctrl.addNewIssue('bulk', null)"
                on-delete-issue="ctrl.deleteIssue(id)"
                on-detach-issue="ctrl.removeIssueFromSprint(id)"
                on-edit-issue="ctrl.editIssue(id)"
                on-toggle-tags="ctrl.toggleTags(tags)"
            )
